<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>{$title}</title>
	{if $keywords}
		<meta name="keywords" content="{$keywords}" />
	{/if}
	{if $description}
		<meta name="description" content="{$description}"/>
	{/if}

  <!-- Vendor CSS Files -->
  <link href="{$host}zb_users/theme/{$theme}/assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="{$host}zb_users/theme/{$theme}/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="{$host}zb_users/theme/{$theme}/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="{$host}zb_users/theme/{$theme}/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="{$host}zb_users/theme/{$theme}/assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="{$host}zb_users/theme/{$theme}/assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="{$host}zb_users/theme/{$theme}/assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="{$host}zb_users/theme/{$theme}/assets/css/style.css" rel="stylesheet">

</head>

<body>

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top ">
    <div class="container d-flex align-items-center">

      <h1 class="logo me-auto"><a href="/">唯一客服系统</a></h1>
      <!-- Uncomment below if you prefer to use an image logo -->
      <!-- <a href="index.html" class="logo me-auto"><img src="{$host}zb_users/theme/{$theme}/assets/img/logo.png" alt="" class="img-fluid"></a>-->

      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="/">首页</a></li>
          <li><a class="nav-link scrollto" href="#services">功能简介</a></li>
          <li><a class="nav-link   scrollto" href="#product">产品优势</a></li>
          <li><a class="nav-link scrollto" href="#system">系统截图</a></li>
          <li><a class="nav-link scrollto" href="#team">联系我们</a></li>
          <li><a class="nav-link scrollto" href="#update">更新动态</a></li>
          <li><a class="getstarted scrollto" href="https://gofly.v1kf.com/login">立即使用</a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Hero Section ======= -->
  <section id="hero" class="d-flex align-items-center">

    <div class="container">
      <div class="row">
        <div class="col-lg-6 d-flex flex-column justify-content-center pt-lg-0 order-2 order-lg-1" data-aos="fade-up" data-aos-delay="200">
          <h1>专注于本地私有化部署在线客服系统研发</h1>
          <h2>源于2019年、高性能Golang+MySQL、致力打造最简单优秀的在线客服系统</h2>
          <h3>软件著作权登记号：2021SR1462600</h3>
          <div class="d-flex justify-content-center justify-content-lg-start">
            <a href="https://gofly.v1kf.com/login" class="btn-get-started scrollto me-2">后台演示</a>
            <a href="/4.html" class="btn-get-started scrollto me-2">下载体验</a>
          </div>
        </div>
        <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="zoom-in" data-aos-delay="200">
          <img src="{$host}zb_users/theme/{$theme}/assets/img/hero-img.png" class="img-fluid animated" alt="">
        </div>
      </div>
    </div>

  </section><!-- End Hero -->

  <main id="main">


    <!-- ======= About Us Section ======= -->
    <section id="about" class="about">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>用心设计，用细节去做开发</h2>
        </div>

        <div class="row content">
          <div class="col-lg-6">
            <p>

            </p>
            <ul>
              <li><i class="ri-check-double-line"></i> 我们的系统支持多租户运营，一次购买，终身使用，无域名限制，无服务器限制！</li>
              <li><i class="ri-check-double-line"></i> 支持公众号/小程序/PC网站/移动端网站/APP/多语言，全渠道对接智能化客服系统。</li>
              <li><i class="ri-check-double-line"></i> 摆脱各大SaaS客服平台诸多限制，搭建属于自己的在线客服系统。</li>
            </ul>
          </div>
          <div class="col-lg-6 pt-4 pt-lg-0">
            <p>
              唯一在线客服系统是一款专注私有本地化部署的网页聊天即时通讯、在线客服坐席系统。采用Golang语言 Gin框架内核+MySQL开发编译而成，多协程模式运行，支撑高并发。
              充分考虑用户的合理需求，多年持续性匠心开发功能。

            </p>
            <a href="#" class="btn-learn-more">更多</a>
          </div>
        </div>

      </div>
    </section><!-- End About Us Section -->

    <!-- ======= Why Us Section ======= -->
    <section id="services" class="why-us section-bg">
      <div class="container-fluid" data-aos="fade-up">

        <div class="row">

          <div class="col-lg-7 d-flex flex-column justify-content-center align-items-stretch  order-2 order-lg-1">

            <div class="content mb-4">
              <h3>唯一在线客服系统提供的功能 <strong>简洁而不简单</strong></h3>
            </div>

            <div class="accordion-list">
              <ul>
                <li>
                  <a data-bs-toggle="collapse" class="collapse" data-bs-target="#accordion-list-1"><span>01</span>支持多商家(多站点) <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                  <div id="accordion-list-1" class="collapse show" data-bs-parent=".accordion-list">
                    <p>
                      支持多商家(多站点)，每个注册用户为一个商家，每个商家可以添加多个坐席子账户。系统可以根据坐席子账号接待状况，自动分配相应客服
                    </p>
                  </div>
                </li>

                <li>
                  <a data-bs-toggle="collapse" data-bs-target="#accordion-list-2" class="collapsed"><span>02</span> 坐席账号数量不限制 <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                  <div id="accordion-list-2" class="collapse" data-bs-parent=".accordion-list">
                    <p>
                      系统独立部署在自己服务器，所有账号数据自己掌控，可以无限添加坐席，不限制坐席数
                    </p>
                  </div>
                </li>

                <li>
                  <a data-bs-toggle="collapse" data-bs-target="#accordion-list-3" class="collapsed"><span>03</span>客服智能分配 <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                  <div id="accordion-list-3" class="collapse" data-bs-parent=".accordion-list">
                    <p>
                      商家主账号优先认领，坐席账号智能分配，可随意转接客服，最大限度满足客服需求
                    </p>
                  </div>
                </li>
                <li>
                  <a data-bs-toggle="collapse" data-bs-target="#accordion-list-4" class="collapsed"><span>04</span>支持H5移动端 <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                  <div id="accordion-list-4" class="collapse" data-bs-parent=".accordion-list">
                    <p>
                      系统自动适配移动端，也可以接入app(h5方式)
                    </p>
                  </div>
                </li>
                <li>
                  <a data-bs-toggle="collapse" data-bs-target="#accordion-list-5" class="collapsed"><span>05</span>支持微信公众号/手机APP管理系统 <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                  <div id="accordion-list-5" class="collapse" data-bs-parent=".accordion-list">
                    <p>
                      客服可以与微信公众号/手机app管理系统访客实时沟通
                    </p>
                  </div>
                </li>
                <li>
                  <a data-bs-toggle="collapse" data-bs-target="#accordion-list-6" class="collapsed"><span>06</span>机器人自动回复 <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                  <div id="accordion-list-6" class="collapse" data-bs-parent=".accordion-list">
                    <p>
                      支持设置常见问题，顾客可以点击常见问题系统会自动回复，也可以设置关键词，触发关键词机器人自动回复
                    </p>
                  </div>
                </li>
                <li>
                  <a data-bs-toggle="collapse" data-bs-target="#accordion-list-7" class="collapsed"><span>07</span>其他功能 <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                  <div id="accordion-list-7" class="collapse" data-bs-parent=".accordion-list">
                    <p>
                      发送文本图片语音信息、访客标签备注轨迹搜索、消息预知、数据统计、来源追踪、自动欢迎问候语、客服消息监控等...
                    </p>
                  </div>
                </li>
              </ul>
            </div>

          </div>

          <div class="col-lg-5 align-items-stretch order-1 order-lg-2 img" style='background-image: url("{$host}zb_users/theme/{$theme}/assets/img/why-us.png");' data-aos="zoom-in" data-aos-delay="150">&nbsp;</div>
        </div>

      </div>
    </section><!-- End Why Us Section -->

    <!-- ======= Skills Section ======= -->
    <section id="skills" class="skills">
      <div class="container" data-aos="fade-up">

        <div class="row">
          <div class="col-lg-6 d-flex align-items-center" data-aos="fade-right" data-aos-delay="100">
            <img src="{$host}zb_users/theme/{$theme}/assets/img/skills.png" class="img-fluid" alt="">
          </div>
          <div class="col-lg-6 pt-4 pt-lg-0 content mb-4" data-aos="fade-left" data-aos-delay="100">
            <h3>唯一客服系统的技术栈</h3>
            <p class="font-italic mb-4">
              即时通讯内核为基于Gin框架的websocket后端服务，前端为Vue2.0内核的ElementUI，前后端分离代码结构清晰明了。
            </p>

            <div class="skills-content">

              <div class="progress">
                <span class="skill">Golang + Gin <i class="val">60%</i></span>
                <div class="progress-bar-wrap">
                  <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>

              <div class="progress">
                <span class="skill">JAVASCRIPT+VUE+ElementUI<i class="val">10%</i></span>
                <div class="progress-bar-wrap">
                  <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>

              <div class="progress">
                <span class="skill">HTML+CSS <i class="val">30%</i></span>
                <div class="progress-bar-wrap">
                  <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>

            </div>

          </div>
        </div>

      </div>
    </section><!-- End Skills Section -->

    <!-- ======= Services Section ======= -->
    <section id="product" class="services section-bg">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>我们的产品优势</h2>
        </div>

        <div class="row">
          <div class="col-xl-3 col-md-6 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="100">
            <div class="icon-box">
              <div class="icon"><i class="bx bxl-dribbble"></i></div>
              <h4><a href="">源码开放</a></h4>
              <p>不像其它客服系统按坐席按年收费，唯一客服系统一次购买，终身使用，源码可二开，无域名限制，无服务器限制！</p>
            </div>
          </div>

          <div class="col-xl-3 col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="zoom-in" data-aos-delay="200">
            <div class="icon-box">
              <div class="icon"><i class="bx bx-file"></i></div>
              <h4><a href="">不限坐席</a></h4>
              <p>部署一套系统即可支持多个用户(网站)使用，每注册一个用户为一个商家，不限商家数，不限制坐席数</p>
            </div>
          </div>

          <div class="col-xl-3 col-md-6 d-flex align-items-stretch mt-4 mt-xl-0" data-aos="zoom-in" data-aos-delay="300">
            <div class="icon-box">
              <div class="icon"><i class="bx bx-tachometer"></i></div>
              <h4><a href="">数据安全</a></h4>
              <p>程序源码及聊天数据全部存储在自己的服务器，无任何第三方服务依赖，支持SSL加密隧道传输，可避免信息数据泄露</p>
            </div>
          </div>

          <div class="col-xl-3 col-md-6 d-flex align-items-stretch mt-4 mt-xl-0" data-aos="zoom-in" data-aos-delay="400">
            <div class="icon-box">
              <div class="icon"><i class="bx bx-layer"></i></div>
              <h4><a href="">多客服对话分配</a></h4>
              <p>支持客服分流/转接/，多客服沟通，到达信息精准传达，无须客户沟通重复内容.</p>
            </div>
          </div>

        </div>

      </div>
    </section><!-- End Services Section -->

    <!-- ======= Cta Section ======= -->
    <section id="cta" class="cta">
      <div class="container" data-aos="zoom-in">

        <div class="row">
          <div class="col-lg-9 text-center text-lg-start">
            <h3>立即行动</h3>
            <p>高性价比的在线客服系统，针对中小企业客户量身定制，精心打造快速网络沟通营销系统，提高您的咨询量</p>
          </div>
          <div class="col-lg-3 cta-btn-container text-center">
            <a class="cta-btn align-middle" href="#">登录一下</a>
          </div>
        </div>

      </div>
    </section><!-- End Cta Section -->

    <!-- ======= Portfolio Section ======= -->
    <section id="system" class="portfolio">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>系统截图</h2>
        </div>

        <ul id="portfolio-flters" class="d-flex justify-content-center" data-aos="fade-up" data-aos-delay="100">
          <li data-filter="*" class="filter-active">All</li>
          <li data-filter=".filter-app">H5</li>
          <li data-filter=".filter-web">PC</li>
        </ul>

        <div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">

          <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <div class="portfolio-img"><img src="{$host}zb_users/theme/{$theme}/assets/img/h51.png" class="img-fluid" alt="微信访问客服界面"></div>
            <div class="portfolio-info">
              <h4>微信访问客服界面</h4>
              <p>展示微信访问客服界面</p>
              <a href="{$host}zb_users/theme/{$theme}/assets/img/h51.png" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="App 1"><i class="bx bx-plus"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-web">
            <div class="portfolio-img"><img src="{$host}zb_users/theme/{$theme}/assets/img/system-index3.png" class="img-fluid" alt="客服列表页面"></div>
            <div class="portfolio-info">
              <h4>客服列表页面</h4>
              <p>演示列出客服页面</p>
              <a href="{$host}zb_users/theme/{$theme}/assets/img/system-index3.png" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="Card 2"><i class="bx bx-plus"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <div class="portfolio-img"><img src="{$host}zb_users/theme/{$theme}/assets/img/h52.png" class="img-fluid" alt=""></div>
            <div class="portfolio-info">
              <h4>微信访问客服界面</h4>
              <p>展示微信访问客服界面</p>
              <a href="{$host}zb_users/theme/{$theme}/assets/img/h52.png" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="App 2"><i class="bx bx-plus"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-web">
            <div class="portfolio-img"><img src="{$host}zb_users/theme/{$theme}/assets/img/system-index.png" class="img-fluid" alt="客服后台首页"></div>
            <div class="portfolio-info">
              <h4>客服后台首页</h4>
              <p>演示出生成二维码功能</p>
              <a href="{$host}zb_users/theme/{$theme}/assets/img/system-index.png" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="Card 2"><i class="bx bx-plus"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-web">
            <div class="portfolio-img"><img src="{$host}zb_users/theme/{$theme}/assets/img/system-index2.png" class="img-fluid" alt="客服后台聊天页面"></div>
            <div class="portfolio-info">
              <h4>客服后台聊天页面</h4>
              <p>客服与访客聊天界面</p>
              <a href="{$host}zb_users/theme/{$theme}/assets/img/system-index2.png" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="Card 2"><i class="bx bx-plus"></i></a>
            </div>
          </div>




        </div>

      </div>
    </section><!-- End Portfolio Section -->

    <!-- ======= Team Section ======= -->
    <section id="team" class="team section-bg">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>联系我们</h2>
        </div>

        <div class="row">

          <div class="col-lg-6">
            <div class="member d-flex align-items-start" data-aos="zoom-in" data-aos-delay="100">
              <div class="pic" style="border-radius: 0;"><img src="{$host}zb_users/theme/{$theme}/assets/img/qq.png" class="img-fluid" alt=""></div>
              <div class="member-info">
                <h4>QQ</h4>
                <span>630892807</span>
                <div class="social">
                  大部分人都有天大的野心，但只有一天的耐心
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-6 mt-4 mt-lg-0">
            <div class="member d-flex align-items-start" data-aos="zoom-in" data-aos-delay="200">
              <div class="pic" style="border-radius: 0;"><img src="{$host}zb_users/theme/{$theme}/assets/img/wechat.jpg" class="img-fluid" alt=""></div>
              <div class="member-info">
                <h4>微信</h4>
                <span>llike620</span>

                <div class="social">
                  当你凝视深渊的时候，深渊也在凝视你
                </div>
              </div>
            </div>
          </div>



        </div>

      </div>
    </section><!-- End Team Section -->

    <!-- ======= Pricing Section ======= -->
    <section id="update" class="pricing">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>更新动态</h2>
        </div>

        <div class="row">

          <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
            <div class="box featured">
              <h3>技术知识</h3>
              <ul>
               {foreach GetList(10,2) as $article}
               <li><a href="{$article.Url}" target="_blank"><i class="bx bx-check"></i> {$article.Title}</a></li>
                {/foreach}
              </ul>
            </div>
          </div>

          <div class="col-lg-4 mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="200">
            <div class="box featured">
              <h3>更新日志</h3>
              <ul>
               {foreach GetList(10,3) as $article}
               <li><a href="{$article.Url}" target="_blank"><i class="bx bx-check"></i> {$article.Title}</a></li>
                {/foreach}
              </ul>
            </div>
          </div>

          <div class="col-lg-4 mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="300">
            <div class="box featured">
              <h3>行业知识</h3>
              <ul>
               {foreach GetList(10,4) as $article}
               <li><a href="{$article.Url}" target="_blank"><i class="bx bx-check"></i> {$article.Title}</a></li>
                {/foreach}
              </ul>
            </div>
          </div>

        </div>

      </div>
    </section><!-- End Pricing Section -->




  </main><!-- End #main -->

  <!-- ======= Footer ======= -->
{template:footer}

</body>

</html>